<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.css">
    <title></title>
    <style>
        .test-box {
            z-index: 2000;
        }

        .test-box button{
            /*flex: 0 0 33.3333%;*/
            flex-grow: 1;
            flex-shrink: 0;
        }

    </style>
<body class="bg-light">


<div class="position-fixed top-50 start-50 translate-middle test-box">
    <div class="d-flex align-items-center justify-content-center flex-wrap">
        <button class="btn btn-success" id="btn">点我</button>

    </div>

</div>



<script src="bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="../src/bootstrap-notify.js"></script>


<script>

    document.querySelector('#btn').addEventListener('click', function () {


        //基本的使用
        // BootstrapNotify.show('登录成功！');

        //携带标题
        // BootstrapNotify.show('月既不解饮，影徒随我身。','李白《月下独酌四首·其一》');

        //参数也可以是一个对象
        // BootstrapNotify.show({
        //     header:'李白《渡荆门送别》',
        //     body:'月下飞天镜，云生结海楼。',
        // });

        //显示和禁用关闭按钮
        // BootstrapNotify.show({
        //     header:'李白《渡荆门送别》',
        //     body:'月下飞天镜，云生结海楼。',
        //     dismissBtnShow:false
        // });



        //禁止自动隐藏,如果关闭自动隐藏，那么关闭按钮将会永远显示
        // BootstrapNotify.show({
        //     header:'李白《渡荆门送别》',
        //     body:'月下飞天镜，云生结海楼。',
        //     dismissBtnShow:false,
        //     autohide:false,
        // });


        //支持不同的方位弹出
        // BootstrapNotify.show({
        //     header:'李白《渡荆门送别》',
        //     body:'月下飞天镜，云生结海楼。',
        //     dismissBtnShow:false,
        //     autohide:false,
        // });



        //支持不同的情境
        BootstrapNotify.show({
            header:'李白《渡荆门送别》',
            body:'月下飞天镜，云生结海楼。',
            dismissBtnShow:false,
            autohide:false,
            //primary secondary success danger warning info light dark
            type:'secondary'
        });


    });


</script>

</body>
</html>
